<template>
  <div class="h5-trade" id="wrapper">
    <ul class="ul-wrap" v-show="listData.length !== 0" id="scroller">
      <li v-for="(item,index) in listData" :key="index"  @click="jumpDetail(item.noOrder,index)">
        <div class="li-con">
            <div class="s-icon" :class="{'bg_blue':item.category == 1 || item.category == 2,'bg_yellow': item.category == 0 || item.category == 3}">{{words[item.category]}}</div>
            <div class="s-info">
              <h1>{{ item.infoOrder }}</h1>
              <p>{{ item.createTime }}</p>
            </div>
            <div class="s-number dinpro" :class="{'colorred':(item.category == 1 || item.category == 2)}">{{((item.category == 1 || item.category == 2)?"+":"-")+item.moneyOrder }}</div>
        </div>
      </li>
      <div :class="{'scroll-loader':isLoading}" v-show="isLoading">{{ txtLoad }}</div>
    </ul>
    <div v-show="listData.length == 0" class="data-null">
        <img src="../../public/imgs/noone-img.png">
        <p>还没有相关订单</p>
    </div>
  </div>
</template>
<script>
var AlloyTouch = require("alloytouch");
var Transform = require("css3transform");
var scrollHei = null;
export default {
  name: "tradeinfo",
  data() {
    return {
      sessionid: "",
      pageNo: 1,
      pageSize: 10,
      listData: [],
      words: ["投", "充", "回", "提"],
      txtLoad: "加载中...",
      loadMoreFlag: false, //是否还有下一页
      isScroll: true,
      isLoading: false,
    };
  },
  mounted() {
    // alert(navigator.userAgent);
    var self = this,
      scroller = document.querySelector("#scroller"),
      scrollHei = document.querySelector("#scroller").clientHeight;

    Transform(scroller, true);
    var AT = new AlloyTouch({
      touch: "#wrapper", //反馈触摸的dom
      vertical: true, //不必需，默认是true代表监听竖直方向touch
      target: document.querySelector("#scroller"), //运动的对象
      property: "translateY", //被运动的属性
      initialValue: 0,
      bindSelf: true,
      min: 0,
      max: 0,
      change: function(value) {
        //console.log(document.documentElement.clientHeight);
      },
      touchMove: function(evt, value) {
        var diff = this.min - value;
        if (diff > 40) {
          self.isLoading = true;
          if (self.loadMoreFlag) {
            self.txtLoad = "数据正在加载中...";
          } else {
            self.txtLoad = "没有更多数据了...";
          }
        } else {
          self.isLoading = false;
        }
      },
      touchEnd: function(evt, value) {
        var diff = this.min - value;
        if (diff > 50) {
          console.log("距离底部还有100像素的时候就加载");
          if (self.loadMoreFlag) {
            self.isScroll = false;
            self.getTradeInfo(function() {
              self.$nextTick(function() {
                var scrollHei = document.querySelector("#scroller")
                  .clientHeight;
                var hei =
                  scrollHei > window.innerHeight
                    ? window.innerHeight - scrollHei
                    : 0;
                AT.min = hei;
                self.isLoading = false;
              });
            });
          } else {
            self.txtLoad = "没有更多数据了...";
          }
        }
      }
    });
    // 加载更多
    if (this.Uitis.isClient) {
      var UserInfo = APP.getInfo();
      UserInfo.then(res => {
        if (res.uId !== "") {
          this.sessionid = res.sessionid;
          self.getTradeInfo(function() {
            self.$nextTick(function() {
              var scrollHei = document.querySelector("#scroller").clientHeight;
              var hei =
                scrollHei > window.innerHeight
                  ? window.innerHeight - scrollHei
                  : 0;
              AT.min = hei;
              if (self.loadMoreFlag) {
                self.txtLoad = "上拉加载更多数据...";
              } else {
                self.txtLoad = "没有更多数据了...";
              }
            });
          }); //获取交易记录
        } else {
          // this.Uitis.JumpNavite("jumpToLogin");
        }
      });
    } else {
      this.sessionid = localStorage.getItem("sessionid");
      if (this.sessionid !== null && this.sessionid !== "") {
        self.getTradeInfo(function() {
          self.$nextTick(function() {
            var scrollHei = document.querySelector("#scroller").clientHeight;
            var hei =
              scrollHei > window.innerHeight
                ? window.innerHeight - scrollHei
                : 0;
            AT.min = hei;
            if (self.loadMoreFlag) {
              self.txtLoad = "上拉加载更多数据...";
            } else {
              self.txtLoad = "没有更多数据了...";
            }
          });
        });
        //获取交易记录
      } else {
        // window.location.href = `${this.Interface.wabapp}login`;
      }
    }
  },
  methods: {
    getTradeInfo(callback) {
      var key = "",
        keyData = {};
      var keyData = JSON.parse(sessionStorage.getItem("key"));
      if (
        keyData !== null &&
        keyData !== "" &&
        keyData !== undefined &&
        this.isScroll
      ) {
        this.listData = keyData.listData;
        var index = keyData.index;
        var top = keyData.offsetTop;
        this.pageNo = keyData.pageNo;
        this.loadMoreFlag = true;
        window.scrollTo(0, top);
      } else {
        var self = this;
        var req = this.$http.get(this.Interface.getOrderList, {
          params: {
            sessionid: this.sessionid,
            category: "",
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        });
        req.then(res => {
          var result = res.data;
          if (result.success) {
            var List = result.data.list;
            if (List != null && List != "" && List.length != 0) {
              self.pageNo = self.pageNo + 1;

              self.loadMoreFlag = List.length < 10 ? false : true;

              self.listData = self.listData.concat(List);

              if (callback) callback();
            }
          }
        });
      }
    },
    jumpDetail(params, index) {
      if (this.Uitis.isClient) {
        var url = {
          // link: `http://192.168.0.215:9011/tradedetail.html?noOrder=${params}`
          link: `${this.Interface.getH5}tradedetail.html?noOrder=${params}`
        };
        this.Uitis.Jump(url);
      } else {
        var offsetTop = document.querySelector(
          ".ul-wrap li:nth-child(" + index + ")"
        ).offsetTop;
        var scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop; //浏览器滚动的高度
        const info = {
          index: index,
          offsetTop: offsetTop,
          listData: this.listData,
          pageNo: this.pageNo
        };
        //获取点击列表所处的位置保存在本地
        sessionStorage.setItem("key", JSON.stringify(info));
        // window.location.href = `http://192.168.0.215:9011/tradedetail.html?noOrder=${params}`;
        window.location.href = `${this.Interface.getH5}tradedetail.html?noOrder=${params}`;
      }
    }
  }
};
</script>
<style lang="less">
.h5-trade {
  .color333 {
    color: #333;
  }
  .colorred {
    color: #ff5555 !important;
  }
  background: #fff;
  height: 100%;
  .ul-wrap {
    li {
      padding: 0 42px;
      .li-con {
        height: 150px;
        display: flex;
        align-items: center;
        position: relative;
        border-bottom: 1Px solid #f3f3f3;
        box-sizing: border-box;
      }
      &:active {
        background: #f4f4f4;
      }
      .s-icon {
        width: 48px;
        height: 48px;
        font-size: 26px;
        color: #fff;
        text-align: center;
        border-radius: 50%;
        display: flex;
        align-items: center;
        // line-height: 48px;
        justify-content: center;
        box-sizing: border-box;
        &.bg_blue {
          background: #5260f8;
        }
        &.bg_yellow {
          background: #e6b673;
        }
      }
      .s-info {
        margin-left: 24px;
        h1 {
          font-size: 30px;
          color: #333;
          font-weight: normal;
        }
        p {
          font-size: 22px;
          color: #999;
          margin-top: 20px;
        }
      }
      .s-number {
        flex: 1;
        font-size: 34px;
        color: #333;
        text-align: right;
      }
      &:last-child {
        border: none;
      }
    }
    .scroll-loader {
      text-align: center;
      height: 60px;
      line-height: 60px;
      position: absolute;
      left: 0;
      bottom: -70px;
      width: 100%;
    }
  }
  .data-null {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    img {
      width: 154px;
      max-width: 100%;
    }
    p {
      text-align: center;
      margin-top: 40px;
      font-size: 27px;
      color: #999;
    }
  }
}
</style>